<template>
  <div id="register">
    <TopTittle>
      <h1>用户注册</h1>
    </TopTittle>
    <div class="register-box">
      <div class="title">你好,欢迎来到建设银行</div>
      <div class="line">
        <p>用户名：</p><input type="text" v-model="username" placeholder="请输入用户名" @blur="test1">
      </div>
      <div class="line" >
        <p>密码：</p><input type="text" v-model="password" placeholder="请输入密码" @blur="test2">
      </div>
      <div class="line">
        <p>确认密码：</p><input type="text" v-model="checkpassword" placeholder="请输入确认" @blur="test3">
      </div>
      <div class="line">
        <p>手机号码：</p><input type="text" v-model="phone" placeholder="请输入手机号" @blur="test4">
      </div>
      <div class="line">
        <p>验证码：</p>
        <div class="yzm">
          <input type="text" v-model="code" placeholder="请输入验证码" @blur="test5">
          <input type="button" @click="send_code" value="发送验证码">
        </div>
      </div>
      <button @click="register">注册</button>
      
    </div>
  </div>
</template>

<script>
import { register_list } from "@/apis/user";
import { code_send } from "@/apis/user"
import { find_user } from "@/apis/user";
import { find_phone } from "@/apis/user";
import TopTittle from "@/components/index/TopTittle.vue";
// import cookies from "js-cookie";
// import { code_find } from '@/apis/user'

export default {
  // username:'register',
  components:{
    TopTittle
  },
  data(){
    return{
        username:'',
        phone:'',
        password:'',
        checkpassword:'',
        code:"",
      }
    },
  methods:{
    test1(){
      if(this.username.trim() !=''){
        find_user({username:this.username}).then((res)=>{
          // console.log(res)
          if(res.data.code==0){
            this.$toast.fail('用户名已被注册！')
            this.username='';
          }
        })
      } else {
        this.$toast.fail("用户名不能为空！")
      }
    },
    test2(){
      let reg = /^(?![a-zA-Z]+$)(?![0-9]+$)[A-Za-z0-9]{6,12}$/;
      if(reg.test(this.password)){
        // console.log(this.password)
      } else {
        this.$toast.fail("密码请输入6-12位字母、数字")
        this.password='';
      }
    },
    test3(){
      if(this.checkpassword==this.password){
        // console.log(1)
      } else {
        this.$toast.fail('两次密码输入不一致')
        this.checkpassword='';
      }
    },
    test4(){
      let reg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
      if(reg.test(this.phone)){
          find_phone({phone:this.phone}).then((res)=>{
            // console.log(res)
            if(res.data.code==1){
              this.$toast.fail(res.data.message)
              this.phone='';
            } else {
              // console.log(res.data.message);
            }
          })
        }
       else {
        this.$toast.fail('请输入正确的手机号码')
      }
    },
    test5(){//验证码比对
      // if(this.code.trim()!=''){
      //   let code_find = localStorage.getItem('code');
      //   // let code_find = cookies.get('code');
      //   if(code_find.trim()==this.code.trim()){
      //     console.log("验证码正确")
      //   } else {
      //     console.log('验证码输入错误')
      //   }
      // } else {
      //   this.$toast.fail('请输入验证码')
      //   this.code='';
      // }
    },
    send_code(){//发送验证码
      //手机号码正则
      let reg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
        if(reg.test(this.phone)){
          //判断手机号码是否被使用
            find_phone({phone:this.phone}).then((res)=>{
              // console.log(res)
              if(res.data.code==1){
                this.$toast.fail(res.data.message)
                this.phone='';
              } else {
                localStorage.setItem('code',res.data.data)
              }
            })
          //发送验证码
          code_send({phoneNumber:this.phone}).then((res)=>{
            // console.log(res);
            if(res.data.code){
              // console.log(res.data.code)
              localStorage.setItem('code',res.data.data)
              this.$toast.success('验证码已发送')
            }else{
              this.$toast.fail(res.data.message+"失败")
            }
          })
        } else {
          this.$toast.fail('请输入正确的手机号码')
          this.phone='';
        }
    },
    register() {//点击注册按钮
      if (this.username &&
          this.password &&
          this.phone &&
          this.checkpassword&&
          this.code) {
          register_list({username:this.username, iphone: this.phone, password: this.checkpassword})
          .then((res) => {
            let code_find = localStorage.getItem('code');
            // console.log(code_find);
            if(code_find.trim()==this.code.trim()){//验证码比对
              // console.log(res);
              if(res.data.code==1){
                // console.log(res.data.message);
                this.$toast.success(res.data.message);
                this.$router.go(-1)
              }else{
                this.$toast.fail(res.data.message);
              }
            } else {
              this.$toast.fail('验证码错误')
              this.code='';
            }
          });
      }else{
        this.$toast.fail('请输入正确的信息');
      }
    },
    
}
}
</script>

<style lang="scss">
  .register-box{
    margin: .2rem;
    .title{
      font-weight: bold;
      text-align: center;
      margin: .5rem;
    }
    .line{
      margin-bottom: .3rem;
      display: flex;
      justify-self: start;
      align-items: center;
      p{
        font-weight: 900;
        width: 30%;
      }
      input{
      width: 60%;
      height: .4rem;
      border: .01rem solid #ccc;
      outline: none;
      border-radius: .1rem;
      padding-left: .2rem;
      box-sizing: border-box;
      font-size: .1rem;
      }
    }
   .yzm{
    width: 60%;
    display: flex;
    justify-content: space-between;
    input:nth-child(1){
      width: 50%;
      font-size: 12px;
      padding-left: .1rem;
    }
    input:nth-child(2){
      width: 40%;
      font-size: .1rem;
      padding: 0;
    }
   }
    button{
      width: 100%;
      height: .4rem;
      border-radius: 10px;
      background-color: #136ab7;
      color: #ffffff;
    }
   }
  
  
</style>